<template>
  <div class="box">
    <div class="MapChart">
      <div ref="MapArea" :style="{ height: '700px', width: '100%' }"></div>
    </div>

    <button class="right" @click="cancel()">返回上一级</button>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import chinaJson from '../../../assets/china.json'
export default {
  name: 'MapChart',
  data () {
    return {
      currentLevel: 0, //1 全国下省份, 2 省份下市区  
      currentClick: null,
      currentCityList: [],
      history: []
    }
  },
  mounted () {
    this.chart = echarts.init(this.$refs.MapArea)
    this.initEcharts()
  },
  beforeDestroy () {
    this.chart.dispose()
  },
  methods: {
    //返回上一级
    cancel () {
      this.currentLevel = 0
      this.initEcharts()
      this.$emit('cityName', this.curCity)
    },
    initEcharts () {
      let regionsList = []

      //全国下省份
      if (!this.currentLevel) {
        regionsList = chinaJson.features.map((item) => ({
          name: item.properties.name,
          type: '省份',
          itemStyle: {
            color: 'red',
            areaColor: 'skyblue'
          },
          label: {
            show: true,
            color: '#000',
          },
          // selected: false
        })) //地图上要显示的区域以及颜色
        regionsList.filter(v => {
          // console.log(v) // 每一项数据源
          if (v.name == this.curCity) {
            v.label.color = 'red'
            v.itemStyle.areaColor = '#ccb444'
          }
        })

        let outProvince = [

        ] //数组定义在这里, 可以在地图上去除部分省份 =》 ['江苏', '江西']
        let objMap = {
          ...chinaJson,
          features: chinaJson.features.filter((item) => !outProvince.includes(item.properties
            .name)) //这里可以过滤不需要展示省份，可以和regionsList联动使用
        }
        echarts.registerMap('chinaJson', objMap) //chinaJSon自定义名称，但是无法显示右下角南海诸岛， 可以设置成china
        // console.log('obj', objMap)
        // this.history = objMap
      }



      //省份下市区
      if (this.currentLevel == 1) {
        //console.log(this.currentLevel, this.currentClick)
        let {
          id
        } = chinaJson.features.filter((item) => this.currentClick == item.properties.name)[0].properties
        //console.log(id)  //找出  @/core/map/china.json 里面内蒙古id  同事在此路径geometryProvince文件下  id.json就是对应该省份对应的市级数据
        let cityList = require(`@/core/map/geometryProvince/${id}.json`) //获取城市数据
        regionsList = cityList.features.map((item) => ({
          name: item.properties.name,
          type: '城市',
          itemStyle: {
            color: 'orange',
            areaColor: 'orange'
          }
        }))
        this.currentCityList = cityList
        //console.log(regionsList)
        let outCityList = [] //剔除不需要城市
        let objMap = {
          ...chinaJson,
          features: cityList.features.filter((item) => !outCityList.includes(item.properties
            .name)) //这里可以过滤不需要展示城市，可以和regionsList联动使用
        }
        echarts.registerMap('chinaJson', objMap) //chinaJSon自定义名称，但是无法显示右下角南海诸岛， 可以设置成china
      }





      let option = {
        geo: {
          map: 'chinaJson', //china可以显示右下加南海诸岛，别的名称无法显示
          roam: false,
          zoom: 1.1,
          aspectScale: 0.8, // 拉伸地图 值为0-1
          regions: regionsList,
          label: {
            show: true,
            color: '#000',
          },
          emphasis: { // 设置鼠标移上去hover效果
            show: true,
            label: {
              color: 'red',
              areaColor: 'green'
            }

          },
          itemStyle: {
            normal: {
              borderWidth: 2,
              borderColor: '#969696', //边框颜色
              color: '#333399', //地图颜色（设置后没起作用），
              //areaStyle:{color:'#333399'},
              areaColor: 'orange',
              label: {
                show: true
              }
            },
          }
        },
      }
      this.chart.setOption(option)
      this.history = {
        ...option
      }
      this.chart.off('click') //解决点击地图会触发两次问题
      this.chart.on('click', (params) => {
        this.currentLevel = params.region.type == '省份' ? 1 : params.region.type == '城市' ? 2 : 0
        this.currentClick = params.name
        if (params.region.type !== '城市') this.curCity = params.region.type == '省份' ? params.name : null
        this.currentLevel != 2 && this.initEcharts()
        // console.log('123', params)
        // console.log(this.currentLevel) //县区下没有别的级别
        if (this.currentLevel = 0) {
          this.$emit('cityName', this.curCity)
        }
        this.$emit('cityName', params.name)
        // params.name = ""
      })

    }
  }
}
</script>

<style lang='scss' scoped>
.right {
  width: 80px;
  height: 30px;
  background-color: skyblue;
  border-radius: 10px;
  margin-left: 800px;
  margin-top: -20px;
  // float: right;
}
</style>
